<script setup>
import { useDataStore } from '@/stores/data'
import { computed } from 'vue';
const { today } = useDataStore()
//不能直接解析会丢失响应性
const data = useDataStore()

const weekDays = ['日', '一', '二', '三', '四', '五', '六']
const weekDaysArr = computed(() => {
    const arr = []

    for (let i = 0; i < 6; i++) {
        let weeks = []
        for (let j = 0; j < 7; j++) {
            weeks.push(data.monthDays[i * 7 + j])
        }
        arr.push(weeks)
    }
    return arr
})
console.log(weekDaysArr.value)
function changeDay(date) {
    if(date.type==='prev'){
        data.prevMonth()

    }else if(date.type==='next'){
        data.nextMonth()
    }
    data.setChooseDay(date.date)
  
}

</script> 
<template>
    <table>
        <thead>
            <tr>
                <th v-for="(day, index) in weekDays" :key="index">{{ day }}</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(week, index) in weekDaysArr" :key="index">
                <td v-for="(day, index) in week" :key="index" :class="{
                   choose: day.date === data.chooseDay,
                   today: day.date === today,
                    last: day.type === 'prev',
                    next: day.type === 'next',
                    week: day.holidays==1,
                }"

                @click="changeDay(day)">
                    <div class="day">{{ day.day }}</div>
                    <div class="lunar">{{ day.LunarDay.dayStr }}</div>
                </td>
            </tr>
        </tbody>
    </table>
</template> 
<style scoped>
table {
    border-collapse: collapse;
    width: 100%;
    text-align: center;
    
}

th,
td {
    border: 1px solid #ddd;
    padding: 5px;
    
}

td {
    cursor: pointer;
    height: 50px;
    
    font-weight: 500;
    
}
td:hover {
   border:1px solid #666;
}

td.last,
td.next {
    opacity: 0.5
}

td.week {
    color: red;
}

td.today {

    background-color: rgb(175, 200, 245);
    border: 2px solid cornflowerblue;

}
td.choose {
    
    border: 2px solid orange;
}
.day {
    font-size: 18px;
}
.lunar {
    font-size: 12px;
    

}
</style>